import React from 'react';
import { Link } from 'umi';
import { List, Avatar, Skeleton, Space } from 'antd';
import request from '@/utils/umiRequest';
import { EyeOutlined } from '@ant-design/icons';
import './index.less';

export default class Article extends React.Component {
  state = {
    initLoading: true,
    loading: false,
    pageSize: 10,
    pageNumber: 1,
    total: 0,
    tableListData: [],
  };

  componentDidMount() {}

  /**
   * 加载列表数据
   */
  loadTableList = async () => {
    const { pageSize, pageNumber } = this.state;
    this.setState({ initLoading: true });
    const result = await request('/icoded/article', {
      method: 'GET',
      body: { pageSize, pageNumber },
    });
    const { success = false, msg, data = [], total = 0 } = result || {};
    data.forEach((element) => {
      element.articleHtml = element.articleHtml.replace(/<[^>]+>/g, '');
    });
    this.setState(
      {
        tableListData: data,
        total,
        initLoading: false,
      },
      () => {
        window.dispatchEvent(new Event('resize'));
      },
    );
  };

  componentWillMount() {
    this.loadTableList();
  }
  render() {
    const IconText = ({ icon, text }) => (
      <Space>
        {React.createElement(icon)}
        {text}
      </Space>
    );
    const {
      initLoading,
      tableListData,
      pageSize,
      pageNumber,
      total,
    } = this.state;
    return (
      <div className="background">
        <List
          loading={initLoading}
          itemLayout="vertical"
          dataSource={tableListData}
          pagination={{
            onChange: (page) => {
              this.setState(
                {
                  pageNumber: page,
                },
                this.loadTableList,
              );
            },
            pageSize: pageSize,
            current: pageNumber,
            hideOnSinglePage: true,
            total: total,
          }}
          renderItem={(item) => (
            <Skeleton
              avatar
              title={false}
              loading={initLoading}
              active
              paragraph={{ rows: 5 }}
            >
              <List.Item
                key={item.id}
                className="no-margin-top"
                actions={[
                  <IconText
                    icon={EyeOutlined}
                    text={'浏览量 ' + item.hasView}
                    key="EyeOutlined"
                  />,
                ]}
                extra={
                  item.articleUrl ? (
                    <img width={100} alt="缩略图" src={item.articleUrl} />
                  ) : null
                }
              >
                <List.Item.Meta
                  // avatar={<Avatar src={item.avatar} />}
                  className="no-margin-bototm"
                  title={
                    item.articleTitle ? (
                      <Link
                        to={{
                          pathname: `/blog/custom/article/${item.id}`,
                          state: { id: item.id },
                        }}
                      >
                        {item.articleTitle}
                      </Link>
                    ) : null
                  }
                  description={item.articleSubTitle || ''}
                />
                <div className="article-html">{item.articleHtml}</div>
              </List.Item>
            </Skeleton>
          )}
        />
      </div>
    );
  }
}
